<template>
  <body>
  <div class="header">
    <div class="time">{{ nowTime }}</div>
    <ul>
      <el-button @click="goToPage1" class="dropdown"><span class="button1">基础信息</span></el-button>
      <el-button @click="goToPage2" class="dropdown"><span class="button2">农情动态</span></el-button>
      <el-button @click="goToPage3" class="dropdown"><span class="button2">土地资源</span></el-button>
    </ul>
  </div>
  <div class="zhengti"/>
  </body>


</template>

<script setup>
import {onMounted, ref} from 'vue'
import router from "@/router";

const nowTime = ref(new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日' + new Date().toLocaleTimeString());
//星期
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
setInterval(() => {
  nowTime.value = new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日 ' + '星期' + weekdays[new Date().getDay()] + ' ' + new Date().toLocaleTimeString();
}, 1000)
// 黑色背景
onMounted(() => {
  document.querySelector('body').setAttribute('style', 'background-color:#000000')
})

//页面跳转
let goToPage1 = function () {
  router.push('/')
}
let goToPage2 = function () {
  router.push('/nqdt')
}
let goToPage3 = function () {
  router.push('/tdzy')
}
</script>

<style lang="scss" scoped>
ul {
  list-style-type: none;
  width: 100%;
  height: 64px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  overflow: hidden;
  background-image: url("@/assets/img/title.png");
  background-size: cover;
}

.header {
  z-index: 10000;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
}

.time {
  width: auto;
  height: 66px;
  line-height: 66px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  position: fixed;
  top: 0;
  left: 34px;
}

.button1 {
  display: inline-block;
  color: #d1dbff;
  text-align: center;
  padding: 0px 50px;
  margin-top: 12px;
  margin-left: 1000px;
  height: 32px;
  line-height: 32px;
  text-decoration: none;
  background-image: url("@/assets/img/right_button_0.png");
  background-size: 100%;
}

.button1:hover {
  color: #d1dbff;
  padding: 0px 50px;
  line-height: 34px;
  height: 34px;
  background-image: url("@/assets/img/right_button_1.png");
  background-size: cover;
}

.button2 {
  display: inline-block;
  color: #d1dbff;
  text-align: center;
  padding: 0px 50px;
  margin-top: 10px;

  height: 34px;
  line-height: 34px;
  text-decoration: none;
  background-image: url("@/assets/img/right_button_0.png");
  background-size: 100%;
}

/* 鼠标放置链接时改变样式 */
.button2:hover {
  color: #d1dbff;
  padding: 0px 50px;
  line-height: 36px;
  height: 36px;
  background-image: url("@/assets/img/right_button_1.png");
  background-size: cover;

}

.dropdown {
  display: inline-block;
}

/* 下拉菜单设置样式 */
.dropdown-content {
  /* 隐藏菜单 */
  z-index: 200000000;
  display: none;
  position: absolute;
  margin-left: 4px;
  /* 设置链接元素的最小宽度 */
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(12, 12, 12, 0.2);
}

.dropdown-content a {
  display: block;
  color: #a4e8ff;
  width: 154px;
  line-height: 36px;
  height: 36px;
  margin-top: 4px;
  text-decoration: none;
  background-image: url("@/assets/img/button.png");
  background-size: cover;
}

.dropdown-content a:hover {
  color: #ffffff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.zhengti {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0;
  background-image: url("@/assets/img/backg.png");
  background-size: cover;

}
</style>